<template>
<view class="pp_page" @click="isShowList=false">
	<view class="top_div">
		<image class="w100" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/image/5765867.png" mode="widthFix"></image>
		<view class="gj_text">
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/image/876978078.png" mode=""></image>
			<view class="">一个帮助企业快捷找到适用政策的小工具</view>
		</view>
		
		<view class="xx_content">
			<view class="xx_item">
				<input type="text" placeholder="请输入企业名称" v-model="company_name" @input="getCompany">
				<view class="xx_xl" v-show="companyList.length>0&&isShowList">
					<view @click="changeCname(item.company_name)" class="" v-for="(item,index) in companyList" :key="index">{{item.company_name}}</view>
				</view>
			</view>
			<view class="xx_item" @click="showPop()">{{chain_name||'请选择产业'}}</view>
			<picker class="xx_item" mode='multiSelector' :value='industry_index' :range='industryAll' range-key="industry_name" @change='changeI' @columnchange='changeLie'>
				{{industry_name||'请选择行业'}}
			</picker>
			
			<button v-if="!mobile" class="sub_btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">政策匹配 一键开启</button>
			<view class="sub_btn" v-else @click="toPP()">政策匹配 一键开启</view>
		
		</view>
	</view>
	
	<multiple-select
		:value="isShow"
		:data="chooseList"
		:default-selected="chooseValue"
		@confirm="changeChoose"
		@cancel='isShow=false'
		:allShow='isAll'
	></multiple-select>
</view>
</template>

<script>
	import {companylist,GetIndustryInfo,GetUseInfo,getWxappUserPhoneByCode} from '@/utils/api.js'
	import multipleSelect from "@/components/momo-multipleSelect/momo-multipleSelect";
export default{
	data(){
		return{
			chain_id:'',
			chain_name:'',
			industryAll:[],
			industry_name:'',
			industry_id:'',
			industry_index:[0,0,0],
			industryAll:[[],[]],
			isShow:false,
			chainList:uni.getStorageSync('myChain'),
			company_name:'',
			mobile:'',
			companyList:[],
			isShowList:false
		}
	},
	components:{
		multipleSelect
	},
	onLoad(){
		GetUseInfo().then(res=>{
			this.mobile = res.data.mobile
		})
		this.chainList = this.chainList.map(item=>{item.label=item.chain_name;item.value=item.id;return item})
		GetIndustryInfo().then(res=>{
			res.data.unshift({industry_name:'不限',id:'',children:[{industry_name:'不限',id:''}]})
			let arr = res.data.map(item=>{
				let i = {
					id:item.id,
					industry_name:item.industry_name,
					children:item.children
				}
				return item
			})
			this.industryAll[0] = arr
			this.industryAll[1] = arr[0].children
		})
	},
	onShareTimeline() {
		return {
			title: '政策云计算 | 投资钟祥',
		}
	},
	onShareAppMessage() {
		return {
			title: '政策云计算 | 投资钟祥',
		}
	},
	methods:{
		getCompany(){
			uni.setStorageSync('noLoading',true)
			this.isShowList = true
			companylist({keywords:this.company_name}).then(res=>{
				this.companyList = res.data.data
			})
		},
		changeCname(name){
			this.company_name = name
			this.isShowList = false
		},
		showPop(){
			this.isAll = false
			this.chooseList = JSON.parse(JSON.stringify(this.chainList))
			this.chooseValue = JSON.parse(JSON.stringify(this.chain_id))
			this.isShow=true
		},	
		changeChoose(e){
			this.isShow=false
			this.chain_id = e.map((el) => el.value)
			this.chain_name = e.map((el) => el.label).join(",");
		},
		changeLie(e){
			if(e.detail.column!=0){
				return
			}
			this.industryAll[1] = this.industryAll[0][e.detail.value].children
		},
		changeI(e){
			let industry_name = [],industry_id=[]
			e.detail.value.forEach((item,index)=>{
				industry_name.push(this.industryAll[index][item].industry_name)
				industry_id.push(this.industryAll[index][item].id)
			})
			console.log(industry_id)
			this.industry_name = industry_name.join(',')
			this.industry_id = industry_id
		},
		onGetPhoneNumber(e){
			getWxappUserPhoneByCode({code:e.detail.code}).then(res=>{
				this.mobile = res.data.phone_info.phoneNumber
				this.toPP()
			})
		},
		toPP(){
			if(!this.company_name){
				uni.showToast({
					title:'企业名称必须输入',
					icon:'error'
				})
				return
			}
			if(this.companyList.findIndex(item=>item.company_name==this.company_name)==-1){
				uni.showModal({
					title:'提示',
					content:'系统检测您的企业名称不完整，可能会影响您的匹配结果，是否继续继续匹配？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url:`/pages/policyList_pp/policyList_pp?company_name=${this.company_name}&chain_id=${this.chain_id||''}&&industry_id=${this.industry_id.length>0?this.industry_id.join(','):''}`
							})
						} 
					},
				})
				return
			}
			uni.navigateTo({
				url:`/pages/policyList_pp/policyList_pp?company_name=${this.company_name}&chain_id=${this.chain_id||''}&&industry_id=${this.industry_id.length>0?this.industry_id.join(','):''}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
page{
	width: 100%;
	height: 100%;
}
.top_div{
	position: relative;
}
.xx_content{
	position: absolute;
	width: 100%;
	top: 52%;
}
.xx_item{
	border-radius: 4px;
	height: 42px;
	font-size: 15px;
	width: calc(100% - 80px);
	margin: 0 30px;
	margin-bottom: 15px;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0 10px;
	color: #333;
	position: relative;
	input{
		width: 100%;
	}
}
.xx_xl{
	max-height: 200px;
	overflow-y: auto;
	border-radius: 0 0 4px 4px;
	border: 1px solid #ccc;
	background-color: #fff;
	position: absolute;
	left: 0;
	top: 42px;
	z-index: 10;
	width: calc(100% - 2px);
	view{
		padding: 5px 10px;
		color: #333;
		font-size: 14px;
		&:active{
			background:rgba(0, 0, 0, 0.1);
		}
	}
}
.pp_page{
	min-height: 100%;
	background: #F1F8FC;
	.top_div{
		width: 100%;
	}
	.w100{
		width: 100%;
	}
	.gj_text{
		position: absolute;
		left: 0;
		top: 37%;
		width: 100%;
		text-align: center;
		height: 40px;
		line-height: 40px;
		text-align: center;
		image{
			width: calc(100% - 60px);
			margin-left: 10px;
			height: 40px;
		}
		view{
			position: absolute;
			top: 0;
			height: 40px;
			line-height: 40px;
			width: 100%;
			text-align: center;
			font-size: 12px;
			color: #0041c4;
		}
	}
}
.sub_btn{
	border-radius: 4px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	width: calc(100% - 60px);
	margin: 0 30px;
	margin-top: 60px;
	color: #fff;
	background: linear-gradient(45deg,#2B80F5,#01D2DC);
}
</style>